JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
CSS
body {
margin: 0;
background-color: #00ff00;
}
JavaScript
var camera, scene, renderer;
var cameraOrtho, sceneOrtho;
var spriteTL, spriteTR, spriteBL, spriteBR, spriteC;
var mapC;
var group;
init();
animate();
function init() {
var width = window.innerWidth;
var height = window.innerHeight;
camera = new THREE.PerspectiveCamera( 60, width / height, 1, 2100 );
camera.position.z = 1500;
cameraOrtho = new THREE.OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
cameraOrtho.position.z = 10;
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x000000, 1500, 2100 );
sceneOrtho = new THREE.Scene();
// create sprites
var amount = 200;
var radius = 500;
var textureLoader = new THREE.TextureLoader();
textureLoader.load( "https://threejs.org/examples/textures/sprite0.png", createHUDSprites );
var mapB = textureLoader.load( "https://threejs.org/examples/textures/sprite1.png" );
mapC = textureLoader.load( "https://threejs.org/examples/textures/sprite2.png" );
group = new THREE.Group();
var materialC = new THREE.SpriteMaterial( { map: mapC, color: 0xffffff, fog: true } );
var materialB = new THREE.SpriteMaterial( { map: mapB, color: 0xffffff, fog: true } );
for ( var a = 0; a < amount; a ++ ) {
var x = Math.random() - 0.5;
var y = Math.random() - 0.5;
var z = Math.random() - 0.5;
var material;
if ( z < 0 ) {
material = materialB.clone();
} else {
material = materialC.clone();
material.color.setHSL( 0.5 * Math.random(), 0.75, 0.5 );
material.map.offset.set( - 0.5, - 0.5 );
material.map.repeat.set( 2, 2 );
}
var sprite = new THREE.Sprite( material );
sprite.position.set( x, y, z );
sprite.position.normalize();
sprite.position.multiplyScalar( radius );
group.add( sprite );
}
scene.add( group );
// renderer
renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth,...